<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            background-color: red;
            width: 200px;
            height: 200px;
        }

        .green {
            background-color: green;
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div id="root">
        <div :class="isRed?'red':'green'" @click='fn'>
            <div style="background-color:skyblue; width:100px; height:100px" @click.stop='fn2'></div>
        </div>
        <button @click='isRed=!isRed'>改变颜色</button>
        <button @click='fn3'>去百度</button>
        <a href="http://www.baidu.com" @click="fn4">阻止去百度</a><br>
        <input type="text" @keyup.backspace='fn5'>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: '#root',
            data: {
                isRed: true,

            },
            methods: {
                fn() {
                    console.log('大div事件触发了')
                },
                fn2() {
                    console.log('点击事件的冒泡阻止了')
                },
                fn3() {
                    //实现页面跳转
                    window.open('http://www.baidu.com')
                },
                fn4(e) {
                    e.preventDefault()
                },
                fn5() {
                    console.log('delete键触发')
                }
            },
            watch: {
                isRed: {
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal)
                    },
                    //一上来就触发
                    immediate: true,
                    //深度对比
                    deep: true
                }

            }
        })
    </script>
</body>

</html>